*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html{
scroll-behavior: smooth;
}
:root{
--white-clr: #fff;
--black-clr: #000;
--light-black: #333;
--primary-clr: #e6303d;
--secondary-clr: #eee;
--tag-clr: #7cc576;
}
/* Basic Styling */
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
color: var(--primary-clr);
}
img{
width: 100%;
height: 100%;
display: block;
transition: transform .3s ease-in-out;
}
.flex{
display: flex;
align-items: center;
}
.container{
max-width: 80%;
margin: auto;
}
.section{
padding-top: 4rem;
}
.wrap{
flex-wrap: wrap;
}
.secondary-bg{
background: var(--secondary-clr);
padding-block: 2.2rem;
}
/* Navbar Styling */
header{
background: var(--white-clr);
position: fixed;
top:0;
left:0;
right: 0;
z-index: 99;
box-shadow:
0px 5px 14.25px .75px rgba(36, 11, 12, .05);
}
.logo{
font-size: 1.8rem;
font-weight: bold;
color: var(--light-black);
}
.link{
font-size: .95rem;
color: var(--light-black);
text-transform: uppercase;
font-weight: 500;
}
.icon{
font-size: .9rem;
color: var(--light-black);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
}
.icon:hover,
.icon-active{
background: var(--secondary-clr)
}
span,
.link-active,
.icon-active{
color: var(--primary-clr);
}
.navbar{
height: 12vh;
justify-content: space-between;
}
.navlist{
gap: 2.5rem;
}
.nav-icons{
gap: .8rem;
}
.hamburger{
font-size: 1.7rem;
color: var(--primary-clr);
display: none;
}
/* Section Styling */
.hero{
height: 115vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin-top: 5.5rem;
}
.hero-content{
height: 100%;
justify-content: flex-end;
}
h3{
font-size: 1.8rem;
font-weight: 500;
line-height: 3.7rem;
color: var(--light-black);
margin-bottom: 0.1rem;
}
h1{
font-size: 4rem;
line-height: 4rem;
font-weight: 600;
color: var(--light-black);
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
h4{
font-size: 1.4rem;
font-weight: 400;
line-height: 3.5rem;
margin-bottom: 1.5rem;
margin-top: 0.1rem;
}
button{
font-weight: 600;
font-size: .9rem;
padding: .8rem 2.2rem;
text-transform: uppercase;
color: var(--white-clr);
border: none;
background: var(--primary-clr);
transition: all .3s ease-in-out;
}
button:hover{
background: var(--light-black);
}
.category-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1.7rem;
}
.category:nth-child(1),
.category:nth-child(4){
grid-row: 1/3;
}
.category:nth-child(2){
grid-row: 1/2;
}
.category{
position: relative;
overflow: hidden;
}
.category button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 500;
background: var(--white-clr);
color: var(--black-clr);
z-index: 3;
}
.category button:hover{
background: var(--primary-clr);
color: var(--white-clr);
}
.category:hover{
transform: scale(1.1);
}
.category::before{
content: '';
position: absolute;
background: var(--white-clr);
width: 0%;
height: 100%;
opacity: .2;
z-index: 2;
transition: all .3s ease-in-out;
}
.category:hover::before{
width: 100%;
}
h2{
font-size: 2rem;
line-height: 4rem;
color: var(--light-black);
font-weight: 500;
text-align: center;
}
.line{
background: var(--primary-clr);
width: 60px;
height: 2.5px;
margin: auto;
}
.card-container{
justify-content: center;
margin-top: 3rem;
text-align: center;
}
.card{
border-right: 1px solid #efefef;
flex: 1;
padding-block: 3.1rem;
margin-bottom: 2rem;
transition: all .3s ease-in-out;
position: relative;
}
.card:hover{
box-shadow:
0px 5px 19px 1px rgba(36, 11, 12, .15);
z-index: 3;
}
.card-content{
padding: 0 3rem;
}
.tittle{
font-size: 1rem;
color: var(--light-black);
line-height: 1.7rem;
font-weight: 500;
}
.price{
margin-top: 1rem;
}
del{
color: #c5c5c5;
}
.amount{
font-size: 1.1rem;
font-weight: 600;
}
.add-to-cart{
position: absolute;
left: 0;
right: 0;
top: 100%;
transform: translateY(10px);
opacity: 0;
visibility: hidden;
transition: all .3s ease-in-out;
}
.card:hover .add-to-cart{
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.sale::before,
.new::before{
content: 'Sale';
position: absolute;
top: 20px;
left: 20px;
padding: .2rem 1.3rem;
background: var(--white-clr);
font-weight: 300;
}
.new::before{
content: 'New';
background: var(--tag-clr);
}
.sale::before{
content: 'Sale';
background: var(--primary-clr);
}
.sale-container{
padding-block: 5rem;
text-align: center;
background-image: url("../images/sale-image.c356a3331265.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sale-container h3{
font-weight: 200;
font-size: 1.56rem;
line-height: 1.6rem;
text-transform: uppercase;
}
.sale-container h1{
font-size: 3.2rem;
font-weight: 500;
line-height: 4.7rem;
}
.sale-container .line{
width: 15%;
background: #c5c5c5;
}
.sale-container h4{
font-size: 1.2rem;
color: #6e6e6e;
line-height: 3.5rem;
}
.box{
flex: 1;
text-align: center;
margin-block: 1rem;
flex-basis: 200px;
}
.box .fa-solid{
font-size: 1.5rem;
color: var(--primary-clr);
}
h5 a{
font-size: 1.1rem;
color: var(--light-black);
font-weight: 500;
line-height: 2rem;
}
.des{
color: #6e6e6e;
font-size: .9rem;
font-weight: 400;
}
/* ---------- FOOTER ---------- */
.cart-footer {
background: var(--white-clr);
padding: 60px 9% 20px;
margin-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-logo .logo {
font-size: 1.5rem;
margin-bottom: 15px;
display: inline-block;
}
.footer-logo p {
color: #666;
line-height: 1.6;
max-width: 300px;
}
.footer-links h4,
.footer-contact h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--light-black);
margin-bottom: 20px;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
color: #666;
font-size: 0.95rem;
}
.footer-links ul li a:hover {
color: var(--primary-clr);
padding-left: 5px;
}
.footer-contact p {
color: #666;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.footer-contact p i {
color: var(--primary-clr);
width: 20px;
}
.footer-bottom {
padding-top: 30px;
border-top: 1px solid var(--gray-medium);
text-align: center;
color: #888;
font-size: 0.9rem;
}